<template>
  <navigator
    :url="`/pages/goods_detail/index?goods_id= ${item.goods_id} `"
    class="goods_item"
  >
    <!-- 如果返回的数据中，没有图片，填充默认图片 -->
    <image
      class="goods_item_image"
      :src="
        item.goods_small_logo ||
          'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1197362953,3835376075&fm=26&gp=0.jpg'
      "
      mode="aspectFill"
    />
    <view class="goods_item_info">
      <!-- 如果是有 text 组件的时候，注意不要随便换行 -->
      <view class="goods_item_name">
        {{ item.goods_name }}
      </view>
      <view class="goods_item_price">{{ item.goods_price }}</view>
    </view>
  </navigator>
</template>

<script>
export default {
  props: ["item"],
};
</script>

<style lang="scss" scoped>
.goods_item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18rpx;
  .goods_item_image {
    width: 180rpx;
    height: 160rpx;
    margin-right: 30rpx;
  }

  .goods_item_info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    .goods_item_name {
      font-size: 28rpx;
      color: #999;
      margin-top: 10rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .goods_item_price {
      color: $theme-color;
    }
  }
}
</style>
